<template>
  <!-- 安装视频 -->
  <div class="installationVideoReader">
    <div class="installationVideoReader-header">
      <div class="title">{{displayPartsNo}}的安装视频</div>
    </div>
    <div class="installationVideoReader-main">
      <div class="video-view">
        <video id="myVideo" :src="installationVideo" :show-center-play-btn='false' :show-play-btn="true" controls :picture-in-picture-mode="['push', 'pop']"></video>
      </div>
      <div class="shareBtn-view">
        <button class="shareBtn" open-type="share">分享给好友</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      propsData: {}, // 上个页面传过来的集合
      installationVideo: "",
      displayPartsNo: "",
    };
  },
  onShareAppMessage() {
    return {
      title: this.displayPartsNo + "的安装视频，拿走不谢",
      imageUrl: "https://c1.zhipeicloud.com/cangpei_mini/images/share_installVideo.png"
    };
  },
  onUnload() {
    if (this.$options.data) {
      Object.assign(this.$data, this.$options.data());
    }
  },
  onLoad(config) {
    this.propsData = config;
    this.getInstallationVideo();
  },
  methods: {
    // 获取购物车商品以及收货人信息
    async getInstallationVideo() {
      const res = await this.$imServive({
        url: "/Misc/GetInstallationVideo",
        data: {
          wareId: this.propsData.wareid,
        }
      });
      console.log("安装视频", res);
      this.installationVideo = res.installationVideo;
      this.displayPartsNo = res.displayPartsNo;
    },
  },
};
</script>

<style scoped>
.installationVideoReader {
  height: 100vh;
  border-top: 0.013333333333333334rem solid #d8d8d8;
  background-color: #fff;
  box-sizing: border-box;
}
.installationVideoReader .installationVideoReader-header {
  padding: 0.25333333333333335rem 0.4rem 0.2rem;
  display: flex;
  align-items: center;
}
.installationVideoReader .installationVideoReader-header .title {
  font-size: 0.64rem;
  font-weight: 600;
  color: #181818;
}
.installationVideoReader .installationVideoReader-main {
  padding: 0 0.4rem;
}
.installationVideoReader .installationVideoReader-main .video-view {
  width: 100%;
  display: flex;
  justify-content: center;
}
.installationVideoReader .installationVideoReader-main .video-view #myVideo {
  width: 9.2rem;
  height: 5.76rem;
  background: #000;
}
.installationVideoReader .installationVideoReader-main .shareBtn-view {
  width: 100%;
  display: flex;
  justify-content: center;
}
.installationVideoReader
  .installationVideoReader-main
  .shareBtn-view
  .shareBtn {
  margin-top: 0.64rem;
  width: 3.44rem;
  height: 0.88rem;
  background: #fff;
  border: 0.013333333333333334rem solid #e74c3c;
  border-radius: 0.52rem;
  font-size: 0.4rem;
  color: #e74c3c;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

